<template>
  <div class="home-view-wrap">
    <el-row :gutter="12">
      <el-col :span="6">
        <div class="common-column-wrap top">
          <div class="common-block-wrap" style="height: 294px; padding: 4px">
            <div class="left-top-wrap">
              <div class="frame-item-wrap">
                <div class="label">
                  <span>接口安全 -</span>
                  <span>资产数</span>
                </div>
                <div class="value">{{ formatNumber(asset) }}</div>
                <div class="common-frame"></div>
              </div>
              <div class="frame-item-wrap">
                <div class="label">
                  <span>数据监测 -</span>
                  <span>资产数</span>
                  <div class="common-frame"></div>
                </div>
                <div class="value">{{ formatNumber(table) }}</div>
              </div>
              <div class="frame-item-wrap">
                <div class="label">应用数</div>
                <div class="value">{{ formatNumber(application) }}</div>
                <div class="common-frame"></div>
              </div>
              <div class="frame-item-wrap">
                <div class="label">告警数</div>
                <div class="value">{{ formatNumber(alarm) }}</div>
                <div class="common-frame"></div>
              </div>
              <div class="center">
                <!--                <i class="iconfont icon-shandian"></i>-->
                <commonIcon
                  iconName="icon-shandian"
                  iconType="icon"
                  isStyle
                  :iconSize="40"
                ></commonIcon>
              </div>
              <div class="common-round"></div>
              <div class="longitudinal"></div>
              <div class="transverse"></div>
              <div></div>
            </div>
          </div>
          <div class="row-division-18"></div>
          <div class="common-block-wrap" style="height: 294px">
            <title-card title="重要数据Top5">
              <base-chart
                slot="content"
                :option="columnOption1"
                v-if="columnOption1.dataset.source.length"
              ></base-chart>
              <div class="chart-tooltip" v-else>
                <!--                <i class="iconfont icon-wushuju"></i>-->
                <commonIcon
                  iconName="icon-wushuju"
                  iconType="icon"
                  :iconSize="36"
                ></commonIcon>
                <span class="tip-content">暂无数据</span>
              </div>
            </title-card>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="common-column-wrap top">
          <div class="common-block-wrap" style="height: 600px; padding: 0 12px">
            <div class="top-relation-wrap">
              <div class="header-title">
                <div class="count-label">敏感表总数</div>
                <div class="cards-wrap">
                  <template v-for="(c, i) in count">
                    <div class="number-block">{{ c }}</div>
                    <div
                      v-if="
                        (count.length - (i + 1)) % 3 === 0 &&
                          count.length - (i + 1) !== 0
                      "
                      class="douhao-block"
                    >
                      ‚
                    </div>
                  </template>
                </div>
              </div>
              <div class="formDiv">
                <el-form
                  :model="queryParams"
                  :inline="true"
                  class="formStyle"
                  @submit.native.prevent
                >
                  <el-form-item label="敏感表" prop="dbType">
                    <el-select
                      v-model="queryParams.dbType"
                      placeholder="请选择"
                      @change="commonChange"
                      clearable
                    >
                      <!-- <el-option
                        v-for="(item, index) in dbTypeList"
                        :key="index"
                        :label="item"
                        :value="item"
                      >
                      </el-option>-->
                      <el-option label="mysql" value="mysql"></el-option>
                      <el-option label="oracle" value="oracle"></el-option>
                      <el-option
                        label="postgreSQL"
                        value="postgreSQL"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <!-- <el-form-item label="客户端IP" prop="sourceIp">
                    <el-select
                      v-model="queryParams.sourceIp"
                      filterable
                      placeholder="请选择"
                      @change="commonChange"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in sourceIpList"
                        :key="index"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                  </el-form-item>-->
                </el-form>
              </div>
              <div class="EChart-container">
                <CommonMagnifierView>
                  <RelationCanvas
                    :type="queryParams.dbType"
                    :option="columnOption3.series[0].data"
                  ></RelationCanvas>
                </CommonMagnifierView>
              </div>
              <!--              <base-chart slot="content" :option="columnOption3"></base-chart>-->
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="common-column-wrap top">
          <div class="common-block-wrap" style="height: 600px">
            <title-card title="敏感字段TOP10">
              <base-chart
                slot="content"
                :option="columnOption2"
                v-if="columnOption2.dataset.source.length"
              ></base-chart>
              <div class="chart-tooltip" v-else>
                <!--                <i class="iconfont icon-wushuju" ></i>-->
                <commonIcon
                  iconName="icon-wushuju"
                  iconType="icon"
                  :iconSize="36"
                ></commonIcon>
                <span class="tip-content">暂无数据</span>
              </div>
            </title-card>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="row-division-18"></div>

    <el-row :gutter="12">
      <el-col :span="9">
        <div class="common-column-wrap chart">
          <div class="common-block-wrap">
            <title-card title="近7日资产变化趋势">
              <div class="chart-inside-wrap" slot="content">
                <base-chart
                  slot="content"
                  :option="columnOption11"
                  v-if="columnOption11.dataset.source.length"
                ></base-chart>
                <div class="chart-tooltip" v-else>
                  <!--                  <i class="iconfont icon-wushuju"></i>-->
                  <commonIcon
                    iconName="icon-wushuju"
                    iconType="icon"
                    :iconSize="36"
                  ></commonIcon>
                  <span class="tip-content">暂无数据</span>
                </div>
              </div>
            </title-card>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="common-column-wrap chart">
          <div class="common-block-wrap">
            <title-card title="接口应用分布">
              <div class="chart-inside-wrap" slot="content">
                <base-chart
                  :option="columnOption10"
                  v-if="columnOption10.dataset.source.length"
                ></base-chart>
                <div class="chart-tooltip" v-else>
                  <!--                  <i class="iconfont icon-wushuju"></i>-->
                  <commonIcon
                    iconName="icon-wushuju"
                    iconType="icon"
                    :iconSize="36"
                  ></commonIcon>
                  <span class="tip-content">暂无数据</span>
                </div>
              </div>
            </title-card>
          </div>
        </div>
      </el-col>

      <el-col :span="9">
        <div class="common-column-wrap chart">
          <div class="common-block-wrap">
            <title-card title="接口动态脱敏">
              <div slot="content" class="chart-inside-wrap">
                <el-table
                  height="100%"
                  ref="interfaceTable"
                  class="common-table-wrap"
                  :data="option12"
                  :stripe="true"
                  style="margin-top: 0"
                  header-cell-class-name="common-header-style"
                >
                  <el-table-column
                    prop="manageName"
                    label="应用名称"
                  ></el-table-column>
                  <el-table-column
                    prop="reg"
                    label="敏感字段"
                  ></el-table-column>
                  <el-table-column
                    prop="replaceValue"
                    label="脱敏显示"
                  ></el-table-column>
                </el-table>
              </div>
            </title-card>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="row-division-18"></div>

    <el-row :gutter="12">
      <el-col :span="9">
        <div class="common-column-wrap chart">
          <div class="common-block-wrap">
            <title-card title="告警类型分布">
              <div class="chart-inside-wrap" slot="content">
                <base-chart
                  :option="columnOption7"
                  v-if="columnOption7.dataset.source.length"
                ></base-chart>
                <div class="chart-tooltip" v-else>
                  <!--                  <i class="iconfont icon-wushuju"></i>-->
                  <commonIcon
                    iconName="icon-wushuju"
                    iconType="icon"
                    :iconSize="36"
                  ></commonIcon>
                  <span class="tip-content">暂无数据</span>
                </div>
              </div>
            </title-card>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="common-column-wrap chart">
          <div class="common-block-wrap">
            <title-card title="告警等级分布">
              <div class="chart-inside-wrap" slot="content">
                <base-chart
                  :option="columnOption8"
                  v-if="columnOption8.dataset.source.length"
                ></base-chart>
                <div class="chart-tooltip" v-else>
                  <!--                  <i class="iconfont icon-wushuju"></i>-->
                  <commonIcon
                    iconName="icon-wushuju"
                    iconType="icon"
                    :iconSize="36"
                  ></commonIcon>
                  <span class="tip-content">暂无数据</span>
                </div>
              </div>
            </title-card>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="common-column-wrap chart">
          <div class="common-block-wrap">
            <title-card title="告警趋势">
              <div class="chart-inside-wrap" slot="content">
                <base-chart
                  :option="columnOption9"
                  v-if="columnOption9.dataset.source.length"
                ></base-chart>
                <div class="chart-tooltip" v-else>
                  <!--                  <i class="iconfont icon-wushuju"></i>-->
                  <commonIcon
                    iconName="icon-wushuju"
                    iconType="icon"
                    :iconSize="36"
                  ></commonIcon>
                  <span class="tip-content">暂无数据</span>
                </div>
              </div>
            </title-card>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="row-division-18"></div>

    <el-row :gutter="12">
      <el-col :span="9">
        <div class="common-column-wrap chart">
          <div class="common-block-wrap">
            <title-card title="数据分类Top5">
              <base-chart
                slot="content"
                :option="columnOption4"
                v-if="columnOption4.dataset.source.length"
              ></base-chart>
              <div class="chart-tooltip" v-else>
                <!--                <i class="iconfont icon-wushuju"></i>-->
                <commonIcon
                  iconName="icon-wushuju"
                  iconType="icon"
                  :iconSize="36"
                ></commonIcon>
                <span class="tip-content">暂无数据</span>
              </div>
            </title-card>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="common-column-wrap chart">
          <div class="common-block-wrap">
            <title-card title="数据分级Top5">
              <div class="chart-inside-wrap" slot="content">
                <base-chart
                  :option="columnOption5"
                  v-if="columnOption5.dataset.source.length"
                ></base-chart>
                <div class="chart-tooltip" v-else>
                  <!--                  <i class="iconfont icon-wushuju"></i>-->
                  <commonIcon
                    iconName="icon-wushuju"
                    iconType="icon"
                    :iconSize="36"
                  ></commonIcon>
                  <span class="tip-content">暂无数据</span>
                </div>
              </div>
            </title-card>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="common-column-wrap chart">
          <div class="common-block-wrap">
            <title-card title="敏感表所属业务系统Top5">
              <base-chart
                slot="content"
                :option="columnOption6"
                v-if="columnOption6.dataset.source.length"
              ></base-chart>
              <div class="chart-tooltip" v-else>
                <!--                <i class="iconfont icon-wushuju"></i>-->
                <commonIcon
                  iconName="icon-wushuju"
                  iconType="icon"
                  :iconSize="36"
                ></commonIcon>
                <span class="tip-content">暂无数据</span>
              </div>
            </title-card>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BaseChart from "@/components/EChart/components/BaseChart";
import {
  home_alarm,
  home_app,
  appAssetNum,
  alarmCount,
  tableNum,
  home_level,
  home_line,
  home_list,
  home_taglist,
  home_type,
  spreadCatatoryList,
  totalDiffusion,
  queryWordAndSensTable,
  dataTypeStatistics,
  dataLevelStatisticsList,
  querySensTableList
} from "@/api/home";

import { getSpreadOverview } from "@/api/overview/spread";
import BaseList from "@/mixins/BaseList";
import { mapGetters } from "vuex";
import commonIcon from "@/components/CommonIcon";
import CommonMagnifierView from "@/components/CommonMagnifierView";
import RelationCanvas from "@/components/EChart/canvas/relation";
import { formatNumber } from "@/utils/util";

export default {
  name: "index",
  components: {
    BaseChart,
    commonIcon,
    CommonMagnifierView,
    RelationCanvas
  },
  mixins: [BaseList],
  computed: {
    ...mapGetters(["systemInfo"])
  },
  data() {
    return {
      flag: false,
      queryParams: {
        dbType: "mysql",
        sourceIp: null
      },
      dbTypeList: [],
      sourceIpList: [],
      asset: 0,
      application: 0,
      alarm: 0,
      table: 0,
      count: "0",
      columnOption1: {
        color: ["#E69138"],
        tooltip: { show: true },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          dimensions: ["字段名称", "数量"],
          source: []
        },
        grid: {
          left: 80,
          right: 20,
          bottom: 40,
          top: 35
        },
        yAxis: {
          name: "单位： 个",
          nameGap: 14,
          nameLocation: "start",
          show: true,
          type: "category",
          inverse: true,
          axisLine: {
            show: true
          }, // 坐标轴线
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
            interval: 0,
            formatter: function(value) {
              let tip = value.length > 4 ? "..." : "";
              return value.substring(0, 4) + tip;
            }
          }, // 坐标轴标签
          splitLine: {
            show: false
          }
        },
        xAxis: {
          type: "value",

          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true
          }, // 坐标轴标签
          splitLine: {
            show: false
          }
        },
        series: [
          {
            type: "bar",
            barWidth: 20
          }
        ]
      },
      columnOption2: {
        color: ["#72C140"],
        tooltip: { show: true },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          dimensions: ["字段名称", "数量"],
          source: []
        },
        grid: {
          left: 80,
          right: 20,
          bottom: 40,
          top: 35
        },
        yAxis: {
          name: "单位： 个",
          nameGap: 14,
          nameLocation: "start",
          show: true,
          type: "category",
          inverse: true,
          axisLine: {
            show: true
          }, // 坐标轴线
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
            interval: 0,
            formatter: function(value) {
              let tip = value.length > 5 ? "..." : "";
              return value.substring(0, 5) + tip;
            }
          }, // 坐标轴标签
          splitLine: {
            show: false
          }
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true
          }, // 坐标轴标签
          splitLine: {
            show: false
          }
        },

        series: [
          {
            type: "bar",
            barWidth: 20
          }
        ]
      },
      columnOption3: {
        color: ["#91cc75", "#fac858", "#fc8452"],
        legend: {
          show: false
        },
        series: [
          {
            type: "graph",
            name: "",
            legendHoverLink: false,
            layout: "force",
            zoom: 1,
            symbol: "circle",
            data: [],
            links: [],
            categories: [],
            roam: true,
            force: {
              repulsion: 300,
              gravity: 0.1,
              layoutAnimation: true
            },
            draggable: true,
            label: {
              show: true,
              position: "right",
              formatter: "{b}",
              color: "#909399"
            },
            labelLayout: {
              hideOverlap: true
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            lineStyle: {
              color: "source",
              curveness: 0.3
            },
            animation: false
          }
        ],
        animationDuration: 1500,
        animationEasingUpdate: "quinticInOut"
      },
      columnOption4: {
        color: ["#448EF7"],
        tooltip: { show: true },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          dimensions: ["名称", "数量"],
          source: []
        },
        grid: {
          left: 80,
          right: 20,
          bottom: 50,
          top: 50
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true
          }, // 坐标轴线
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
            interval: 0,
            width: 80,
            overflow: "breakAll",
            ellipsis: "..."
          }, // 坐标轴标签
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: "单位： 个",
          nameGap: 22,
          type: "value",
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed"
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: 20
          }
        ]
      },

      columnOption5: {
        color: ["#448EF7", "#72C141", "#E69137", "#E13C3A"],
        tooltip: { show: true },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          dimensions: ["名称", "数量"],
          source: []
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 50,
          top: 20
        },
        legend: {
          show: true
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "75%"],
            center: ["50%", "55%"],
            labelLine: {
              normal: {
                show: false // 隐藏所有指示线
              }
            },
            label: {
              show: false
            }
          }
        ]
      },
      columnOption6: {
        color: ["#39A4E1"],
        tooltip: { show: true },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          dimensions: ["名称", "数量"],
          source: []
        },
        grid: {
          left: 80,
          right: 20,
          bottom: 50,
          top: 50
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true
          }, // 坐标轴线
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
            interval: 0,
            width: 60,
            height: 30,
            overflow: "breakAll",
            // ellipsis: '...',
            formatter: function(params) {
              let val = "";
              if (params.length > 26) {
                val = params.substr(0, 26) + "...";
                return val;
              } else {
                return params;
              }
            }
          }, // 坐标轴标签
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: "单位： 个",
          nameGap: 22,
          type: "value",
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed"
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: 20
          }
        ]
      },
      columnOption7: {
        color: ["#E2BB22"],
        tooltip: { show: true },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          dimensions: ["告警类型", "数量"],
          source: []
        },
        grid: {
          left: 80,
          right: 20,
          bottom: 50,
          top: 35
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true
          }, // 坐标轴线
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true
          }, // 坐标轴标签
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: "单位： 次",
          nameGap: 20,
          type: "value",
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed"
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: 20
          }
        ]
      },
      columnOption8: {
        color: ["#E13C3A", "#E69137", "#72C141"],
        tooltip: { show: true },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          dimensions: ["告警等级", "数量"],
          source: []
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 50,
          top: 20
        },
        legend: {
          show: true
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "75%"],
            center: ["50%", "55%"],
            labelLine: {
              show: false
            },
            label: {
              show: false
            }
          }
        ]
      },
      columnOption9: {
        color: ["#72C141", "#D9211F"],
        tooltip: {
          show: true
        },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          dimensions: ["时间", "数量"],
          source: []
        },
        grid: {
          left: 80,
          right: 20,
          bottom: 50,
          top: 35
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true
          }, // 坐标轴线
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
            rotate: -15,
            align: "center",
            margin: 20,
            interval: 0
          }, // 坐标轴标签
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: "单位： 次",
          nameGap: 22,
          type: "value",
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed"
            }
          }
        },
        series: [
          {
            type: "line",
            symbol: "circle",
            smooth: true,
            lineStyle: {
              width: 1
            }
          }
        ]
      },
      columnOption10: {
        color: [
          "#458ef7",
          "#939e26",
          "#7936d8",
          "#2b4cd8",
          "#d33dc8",
          "#42bee5",
          "#72c141",
          "#e69137",
          "#e13c3a",
          "#e2bb22"
        ],
        tooltip: {
          show: true,
          position: function(point, params, dom, rect, size) {
            return [0, point[1]];
          }
        },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          dimensions: ["应用名称", "数量"],
          source: []
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 50,
          top: 20
        },
        legend: {
          show: false,
          orient: "vertical",
          align: "left",
          right: "10%",
          top: "middle",
          formatter: function(name) {
            return name ? name.substr(0, 8) : "";
          }
        },
        series: [
          {
            type: "pie",
            radius: ["0", "75%"],
            center: ["50%", "50%"],
            labelLine: {
              show: false
            },
            label: {
              show: false
            }
          }
        ]
      },
      columnOption11: {
        color: ["#72C141", "#D9211F"],
        tooltip: {
          show: true
        },
        legend: {
          show: true,
          orient: "horizontal",
          itemWidth: 22,
          itemHeight: 10,
          lineStyle: {
            type: "solid"
          }
        },
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，
          // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          dimensions: ["时间", "资产新增", "资产下线"],
          source: []
        },
        grid: {
          right: 10,
          bottom: 50,
          top: 40
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true
          }, // 坐标轴线
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            rotate: -15,
            align: "center",
            margin: 20,
            interval: 0,
            show: true,
            width: 68
          }, // 坐标轴标签
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: "单位： 个",
          nameGap: 22,
          type: "value",
          axisLine: {
            show: true
          },
          axisTick: {
            show: false
          }, // 坐标轴刻度
          axisLabel: {
            show: true
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed"
            }
          }
        },
        series: [
          {
            type: "line",
            symbol: "circle",
            lineStyle: {
              width: 1,
              type: "dashed"
            }
          },
          {
            type: "line",
            symbol: "circle",
            lineStyle: {
              width: 1,
              type: "dashed"
            }
          }
        ]
      },
      option12: [],
      interval: null,
      isNext: false
    };
  },
  methods: {
    formatNumber(num) {
      return formatNumber(num);
    },
    //数据分类统计
    getDataTypeStatistics() {
      dataTypeStatistics().then(res => {
        if (res && res.code === 200) {
          if (res.data && res.data instanceof Array) {
            this.columnOption4.dataset.source = res.data.reduce((r, c) => {
              r.push({
                名称: c.dataName,
                数量: c.nums
              });
              return r;
            }, []);
          } else {
            this.columnOption4.dataset.source = [];
          }
        }
      });
    },
    getDataLevelStatisticsList() {
      dataLevelStatisticsList().then(res => {
        if (res && res.code === 200) {
          if (res.data.list && res.data.list instanceof Array) {
            this.columnOption5.dataset.source = res.data.list.reduce((r, c) => {
              r.push({
                名称: c.dataName,
                数量: c.nums
              });
              return r;
            }, []);
          } else {
            this.columnOption5.dataset.source = [];
          }
        }
      });
    },
    // 敏感字段top10和敏感表所属业务系统top5
    getQueryWordAndSensTable() {
      queryWordAndSensTable().then(res => {
        if (res && res.code === 200) {
          if (res.data.leWordList && res.data.leWordList instanceof Array) {
            this.columnOption2.dataset.source = res.data.leWordList.reduce(
              (r, c) => {
                r.push({
                  字段名称: c.dbLeTypeName,
                  数量: c.dbLeTypeCount
                });
                return r;
              },
              []
            );
          } else {
            this.columnOption2.dataset.source = [];
          }
          if (
            res.data.sensTableCountGroupByApplicationSystem &&
            res.data.sensTableCountGroupByApplicationSystem instanceof Array
          ) {
            this.columnOption6.dataset.source = res.data.sensTableCountGroupByApplicationSystem.reduce(
              (r, c, i) => {
                if (i < 5) {
                  r.push({
                    名称: c.systemName,
                    数量: c.count
                  });
                }
                return r;
              },
              []
            );
          } else {
            this.columnOption6.dataset.source = [];
          }
        }
      });
    },
    //数据库类型下拉列表
    homeDownType() {
      this.commonChange(); //liuyun
      spreadCatatoryList({
        sensitiveFlag: 0,
        statNames: "dbType"
      }).then(res => {
        console.log("res====--->", res);
        if (res && res.code === 200) {
          this.dbTypeList = res.data;
          //在接口返回之后，有数据的情况下调扩散总数图的接口
          if (this.dbTypeList.length) {
            this.queryParams.dbType = this.dbTypeList[0];
            //  this.commonChange();
          }
        } else {
          this.dbTypeList = [];
        }
      });
    },
    //敏感表
    getQuerySensTableList(data) {
      querySensTableList(data).then(res => {
        if (res && res.code === 200) {
          this.count = res.data.num.toString();
          this.columnOption3.series[0].data = res.data.senstable;
        }
      });
    },

    commonChange() {
      let params = {};
      if (this.queryParams.dbType) params.dbType = this.queryParams.dbType;
      if (this.queryParams.sourceIp) {
        params.sourceIp = this.queryParams.sourceIp;
      }

      if (params.dbType) {
        this.getQuerySensTableList({ dbType: this.queryParams.dbType }); //liuyun
      } else {
        // 未选择数据库类型
      }
    },
    // 客户端IP 下拉框
    homeDownIp() {
      const params = {
        sensitiveFlag: 0,
        statNames: "sourceIp"
      };
      spreadCatatoryList(params).then(res => {
        console.log(res);
        if (res && res.code === 200) {
          this.sourceIpList = res.data;
        } else {
          this.sourceIpList = [];
        }
      });
    },
    //扩散总数图
    // getDiffusionData(params) {
    //   totalDiffusion(params).then((res) => {
    //     if (res && res.code === 200) {
    //       this.columnOption3.series[0].data = res.data.nodes.reduce((r, c) => {
    //         r.push({
    //           id: c.id,
    //           name: c.name,
    //           category: c.category,
    //           symbolSize: parseInt(c.symbolSize),
    //           value: c.value,
    //         });
    //         return r;
    //       }, []);
    //       this.columnOption3.series[0].links = res.data.links;
    //       this.columnOption3.series[0].categories = res.data.categories;
    //     }
    //   });
    // },
    // 敏感字段TOP10
    // getHomeWordList(){
    //   home_wordlist().then(res=>{
    //       if (res && res.code === 200) {
    //         // 扩散字段
    //         if (res.data.wordList && res.data.wordList instanceof Array) {
    //           this.columnOption2.dataset.source = res.data.wordList.reduce((r, c) => {
    //             r.push({
    //               '字段名称': c.wordName,
    //               '数量': c.num
    //             })
    //             return r
    //           }, [])
    //         } else {
    //           this.columnOption2.dataset.source = []
    //         }
    //       }
    //   })
    // },
    // 敏感字段TOP10
    getHomeWordList() {
      this.getSpreadOverview("sensitiveWord").then(res => {
        console.log(res);
        if (res && res instanceof Array) {
          this.columnOption2.dataset.source = res.reduce((r, c) => {
            r.push({
              字段名称: c.sensitiveWord,
              数量: c.spreadCount
            });
            return r;
          }, []);
          console.log(this.columnOption2.dataset.source);
        } else {
          this.columnOption2.dataset.source = [];
        }
      });
    },
    //重要数据TOP5
    getHomeTaglist() {
      home_taglist().then(res => {
        if (res && res.code === 200) {
          if (res.data.tagList && res.data.tagList instanceof Array) {
            this.columnOption1.dataset.source = res.data.tagList.reduce(
              (r, c) => {
                r.push({
                  字段名称: c.dataName,
                  数量: c.nums
                });
                return r;
              },
              []
            );
          } else {
            this.columnOption1.dataset.source = [];
          }
        }
      });
    },
    //告警趋势
    getHomeAlarmData() {
      home_alarm().then(res => {
        if (res && res.code === 200) {
          // 告警趋势
          if (
            res.data.alarmTrendDataVo &&
            res.data.alarmTrendDataVo.valueList &&
            res.data.alarmTrendDataVo.valueList instanceof Array
          ) {
            this.columnOption9.dataset.source = res.data.alarmTrendDataVo.valueList.reduce(
              (r, c) => {
                r.push({
                  时间: c.name,
                  数量: c.value
                });
                return r;
              },
              []
            );
          } else {
            this.columnOption9.dataset.source = [];
          }
        }
      });
    },
    //数据分类TOP5
    // getHomeDatatype(){
    //   home_datatype().then(res =>{
    //       if (res && res.code === 200) {
    //         // 数据分类
    //         if (res.data.dataTypeList && res.data.dataTypeList instanceof Array) {
    //           this.columnOption4.dataset.source = res.data.dataTypeList.reduce((r, c, i) => {
    //             if (i < 5) {
    //               r.push({
    //                 '名称': c.dbLeTypeName,
    //                 '数量': c.dbLeTypeCount
    //               })
    //             }
    //             return r
    //           }, [])
    //         } else {
    //           this.columnOption4.dataset.source = []
    //         }
    //
    //         // 数据分级
    //         if (res.data.leTypeList && res.data.leTypeList instanceof Array) {
    //           this.columnOption5.dataset.source = res.data.leTypeList.reduce((r, c) => {
    //             r.push({
    //               '名称': c.dbLeTypeName,
    //               '数量': c.dbLeTypeCount
    //             })
    //             return r
    //           }, [])
    //         } else {
    //           this.columnOption5.dataset.source = []
    //         }
    //       }
    //   })
    // },
    //数据分类TOP5
    homeDataType() {
      this.getSpreadOverview("sensitiveTypes.typeName").then(res => {
        if (res && res instanceof Array) {
          this.columnOption4.dataset.source = res.reduce((r, c, i) => {
            if (i < 5) {
              r.push({
                名称: c.typeName,
                数量: c.spreadCount
              });
            }
            return r;
          }, []);
        } else {
          this.columnOption4.dataset.source = [];
        }
      });
    },
    //数据分级TOP5
    homeDataLevel() {
      this.getSpreadOverview("sensitiveLevelName").then(res => {
        console.log(res);
        if (res && res instanceof Array) {
          this.columnOption5.dataset.source = res.reduce((r, c) => {
            r.push({
              名称: c.sensitiveLevelName,
              数量: c.spreadCount
            });
            return r;
          }, []);
        } else {
          this.columnOption5.dataset.source = [];
        }
      });
    },
    getHomeAppData() {
      home_app().then(res => {
        if (res && res.code === 200) {
          console.log("resssssss", res);
          let pieData = [];
          if (res.data && res.data instanceof Array) {
            if (res.data.length > 10) {
              pieData = res.data.slice(0, 10);
            } else {
              pieData = res.data;
            }
          }

          this.columnOption10.dataset.source = pieData.reduce((r, c) => {
            r.push({
              应用名称: c.aplName,
              数量: c.nums
            });
            return r;
          }, []);
        }
      });
    },
    getHomeListData() {
      return new Promise((resolve, reject) => {
        home_list().then(res => {
          if (res && res.code === 200) {
            this.option12 = res.data ? res.data : [];
            resolve();
          }
        });
      });
    },
    getHomeLineData() {
      home_line().then(res => {
        if (res && res.code === 200) {
          // this.columnOption11.dataset.source=[
          //   {
          //     "时间": "2021-11-24",
          //     "资产新增": 0,
          //     "资产下线": 24500
          //   },
          //   {
          //     "时间": "2021-11-25",
          //     "资产新增": 0,
          //     "资产下线": 6500
          //   },
          //   {
          //     "时间": "2021-11-26",
          //     "资产新增": 0,
          //     "资产下线": 19600
          //   },
          //   {
          //     "时间": "2021-11-27",
          //     "资产新增": 0,
          //     "资产下线": 6000
          //   },
          //   {
          //     "时间": "2021-11-28",
          //     "资产新增": 0,
          //     "资产下线": 0
          //   },
          //   {
          //     "时间": "2021-11-29",
          //     "资产新增": 0,
          //     "资产下线": 1920
          //   },
          //   {
          //     "时间": "2021-11-30",
          //     "资产新增": 1,
          //     "资产下线": 100
          //   }
          // ]
          this.columnOption11.dataset.source = res.data.reduce((r, c) => {
            r.push({
              时间: c.days,
              资产新增: c.upnum,
              资产下线: c.downnum
            });
            return r;
          }, []);
        }
      });
    },
    getHomeAppAssetNum() {
      appAssetNum().then(res => {
        if (res && res.code === 200) {
          this.asset = res.data.assetNum || 0;
          this.application = res.data.appNum || 0;
        }
      });
    },
    getHomeAlarmCount() {
      alarmCount().then(res => {
        if (res && res.code === 200) {
          this.alarm = res.data.alarmNum || 0;
        }
      });
    },
    getHomeTableNum() {
      tableNum().then(res => {
        if (res && res.code === 200) {
          this.table = res.data.tableNum || 0;
        }
      });
    },
    // getHomeSpreadData() {
    //   home_spread().then(res => {
    //     if (res && res.code === 200) {
    //       this.columnOption3.series[0].data = res.data.nodes.reduce((r, c) => {
    //         r.push({
    //           id: c.id,
    //           name: c.name,
    //           category: c.category,
    //           symbolSize:parseInt(c.symbolSize),
    //           value:c.value
    //         })
    //         return r
    //       }, [])
    //       this.columnOption3.series[0].links = res.data.links
    //       this.columnOption3.series[0].categories = res.data.categories
    //     }
    //   })
    // },

    //扩散表TOP5
    // getHomeWorkData() {
    //   home_table().then(res => {
    //     if (res && res.code === 200) {
    //       this.columnOption6.dataset.source = res.data.reduce((r, c, i) => {
    //         if (i < 5) {
    //           r.push({
    //             '表名称': c.tableName,
    //             '数量': c.num
    //           })
    //         }
    //         return r
    //       }, [])
    //     }
    //   })
    // },
    //扩散表TOP5
    getHomeWorkData() {
      this.getSpreadOverview("dbIp,dbPort,dbName,tableName").then(res => {
        // console.log(res)
        if (res && res instanceof Array) {
          this.columnOption6.dataset.source = res.reduce((r, c, i) => {
            if (i < 5) {
              r.push({
                表名称: c.tableName,
                数量: c.spreadCount
              });
            }
            return r;
          }, []);
        }
      });
    },
    getHomeLevelData() {
      home_level().then(res => {
        if (res && res.code === 200) {
          this.columnOption8.dataset.source = res.data.reduce((r, c) => {
            r.push({
              告警等级: c.name,
              数量: c.count
            });
            return r;
          }, []);
        }
      });
    },
    getHomeTypeData() {
      home_type().then(res => {
        if (res && res.code === 200) {
          this.columnOption7.dataset.source = res.data.reduce((r, c) => {
            r.push({
              告警类型: c.name,
              数量: c.count
            });
            return r;
          }, []);
        }
      });
    },
    getNextData(fn) {
      if (!this.isNext) {
        this.isNext = true;
        setTimeout(() => {
          this.getHomeListData().finally(() => {
            if (fn) fn();
            this.isNext = false;
          });
        }, 60 * 1000);
      }
    },
    initTableScroll() {
      this.clear();
      let table = this.$refs.interfaceTable.$el.children[2];
      // let table = document.getElementsByClassName('el-table__body-wrapper')[0]
      table.scrollTop = 0;

      this.interval = setInterval(() => {
        if (this.option12.length > 0) {
          let clientHeight = table.clientHeight,
            scrollHeight = table.scrollHeight;

          if (scrollHeight > clientHeight) {
            table.scrollTop = table.scrollTop + 1;
            if (table.scrollTop + clientHeight >= scrollHeight) {
              table.scrollTop = 0;
            }

            if (table.scrollTop + clientHeight >= scrollHeight - 20) {
              this.getNextData(() => {
                table.scrollTop = 0;
              });
            }
          } else {
            this.getNextData();
          }
        } else {
          this.getNextData();
        }
      }, 50);
    },
    clear() {
      if (this.interval) {
        clearInterval(this.interval);
        this.interval = null;
      }
    },

    /**
     * 通用请求
     * @param statNames
     * @returns {Promise<unknown>}
     */
    getSpreadOverview(statNames) {
      return new Promise((resolve, reject) => {
        getSpreadOverview({
          statNames,
          sensitiveFlag: 0,
          topCount: 10
        }).then(res => {
          if (res && res.code === 200) {
            resolve(res.data);
          } else {
            if (!this.flag) {
              this.handleListTips(res);
              this.flag = true;
            }
          }
        });
      });
    }

    //
    // /**
    //  * 敏感字段
    //  */
    // getSensitiveWord() {
    //   this.getSpreadOverview('sensitiveWord').then(res => {
    //     this.columnLeftDataSet.source = res
    //   })
    // },
    //
    // /**
    //  * 数据分级
    //  */
    // getDataLevel() {
    //   this.getSpreadOverview('sensitiveTypes.typeName').then(res => {
    //     this.pieLeftDataSet.source = res
    //   })
    // },
    //
    // /**
    //  * 敏感等级
    //  */
    // getSensitiveLevel() {
    //   this.getSpreadOverview('sensitiveLevelName').then(res => {
    //     this.pieRightDataSet.source = res
    //   })
    // },
  },
  mounted() {
    this.getHomeAppAssetNum();
    this.getHomeAlarmCount();
    this.getHomeTableNum();
    this.getHomeAppData(); // 接口应用分布
    this.getHomeListData(); // 接口动态脱敏
    // this.getHomeWordList()
    // this.homeDataType()
    // this.homeDataLevel();
    // this.getHomeWorkData()// 扩散表TOP5
    this.getHomeLevelData();
    this.getHomeTypeData();
    this.getHomeLineData();
    this.getHomeTaglist();
    this.getHomeAlarmData();
    this.getQueryWordAndSensTable();
    this.getDataTypeStatistics();
    this.getDataLevelStatisticsList();
    this.getQuerySensTableList({ dbType: "mysql" }); //liuyun
    setTimeout(() => {
      // this.homeDownIp();
      // this.homeDownType();
    }, 0);
    setTimeout(() => {
      this.initTableScroll();
    }, 1000);
  },
  beforeDestroy() {
    this.clear();
  }
};
</script>

<style scoped lang="scss">
.home-view-wrap {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;

  .row-division-18 {
    height: 12px;
    width: 100%;
  }

  .common-column-wrap {
    width: 100%;
    box-sizing: border-box;

    .common-block-wrap {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      position: relative;
      border-radius: 5px;
      overflow: hidden;

      ::v-deep .el-table__body-wrapper {
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */

        &::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
      }

      .chart-inside-wrap {
        width: 100%;
        height: 100%;
        padding: 12px;
        box-sizing: border-box;
      }

      .chart-tooltip {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0.5;

        .icon-wushuju {
          font-size: 36px;
        }

        .tip-content {
          font-size: 12px;
        }
      }

      .left-top-wrap {
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        position: relative;

        .frame-item-wrap {
          width: 50%;
          height: 50%;
          box-sizing: border-box;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .common-frame {
            width: calc(100% - 8px);
            height: calc(100% - 8px);
            position: absolute;
            top: 4px;
            left: 4px;
            z-index: 2;
            overflow: hidden;
            border: 2px solid var(--theme-color);
          }

          .label {
            font-size: 16px;
            color: #303133;
          }

          .value {
            color: #000;
            margin-top: 8px;
            font-size: 24px;
            font-weight: 400;
          }
        }

        .common-round {
          width: 50px;
          height: 50px;
          border: 2px solid var(--theme-color);
          position: absolute;
          z-index: 3;
          left: calc(50% - 25px);
          top: calc(50% - 25px);
          border-radius: 50%;
          background-color: #fff;
        }

        .longitudinal {
          // 纵向
          width: 8px;
          height: 100%;
          position: absolute;
          background-color: #fff;
          left: calc(50% - 4px);
          z-index: 4;
        }

        .transverse {
          // 横向
          height: 8px;
          width: 100%;
          position: absolute;
          background-color: #fff;
          top: calc(50% - 4px);
          z-index: 4;
        }

        .center {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
          position: absolute;
          left: calc(50% - 20px);
          top: calc(50% - 20px);
          z-index: 5;
          display: flex;
          justify-content: center;
          align-items: center;

          .iconfont {
            font-size: 40px;
          }
        }
      }

      .top-relation-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .formDiv {
          width: 100%;
          padding: 12px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-around;
        }

        .EChart-container {
          width: 100%;
          height: calc(100% - 143px);
        }

        .header-title {
          width: 100%;
          height: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-top: 10px;

          .count-label {
            font-size: 24px;
            font-weight: bold;
            color: #333333;
            margin-right: 12px;
          }

          .cards-wrap {
            display: flex;
            align-items: center;

            .number-block {
              width: 38px;
              height: 58px;
              font-size: 46px;
              text-align: center;
              line-height: 58px;
              color: #fff;
              background-color: #1777ce;
              margin-right: 8px;
            }

            .douhao-block {
              color: #1777ce;
              font-size: 50px;
              width: 20px;
              overflow: hidden;
              transform: translateY(10px);
            }
          }
        }
      }
    }
  }

  .top {
    height: 600px;
  }

  .chart {
    height: 350px;
  }

  ::v-deep .common-header-style {
    background-color: rgba(23, 119, 206, 0.2);
    color: #000;
  }
}
</style>
